<template>
	<div class="marketingPosterList">
		<el-card shadow="hover">
			<div class="marketing-poster-list mb15">
				<el-form :inline="true" :model="searchForm" label-width="90px" class="demo-form-inline">
					<el-row>
						<el-col :span="8">
							<el-form-item label="关键词:" style="width: 100%">
								<el-input show-word-limit maxlength="200" v-model="searchForm.keyword" placeholder="关键词" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8" style="padding-left: 10px">
							<el-form-item>
								<div>
									<el-button type="primary" @click="init">搜索</el-button>
									<el-button @click="resetForm">重置</el-button>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="8" style="text-align: right">
							<el-button type="success" @click="toAdd">新增广告位</el-button>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table :data="tableData" style="width: 100%" v-loading="loading">
				<el-table-column type="index" label="序号" width="60">
					<template #default="scope">
						<span>{{ scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="positionName" label="位置名称" show-overflow-tooltip />
				<el-table-column prop="description" label="位置说明" show-overflow-tooltip />
				<el-table-column prop="width" label="宽度" show-overflow-tooltip />
				<el-table-column prop="height" label="高度" show-overflow-tooltip />
				<el-table-column label="位置示意图" show-overflow-tooltip>
					<template #default="scope">
						<Img
							:src="scope.row.picsArr[0].src"
							:preview-src-list="scope.row.picsSrcArr"
							width="50px"
							height="50px"
							v-if="$utils.arrHasData(scope.row.picsArr)"
						/>
					</template>
				</el-table-column>
				<el-table-column prop="score" label="排序" show-overflow-tooltip> </el-table-column>
				<el-table-column fixed="right" label="操作" width="60px">
					<template #default="scope">
						<el-button text @click="toEdit(scope.row)" type="primary">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-dialog v-model="addDialogVisible" :title="title" width="600px">
			<el-form :model="ruleForm" :rules="rules" ref="formRef" label-width="90px">
				<el-form-item prop="positionCode" label="位置代码">
					<el-input
						show-word-limit
						maxlength="200"
						v-model="ruleForm.positionCode"
						:disabled="!isAdd"
						placeholder="唯一的位置代码，全大写，用“-”分割，不可编辑"
					/>
				</el-form-item>
				<el-form-item prop="positionName" label="位置名称">
					<el-input show-word-limit maxlength="200" v-model="ruleForm.positionName" />
				</el-form-item>
				<el-form-item label="位置说明">
					<el-input show-word-limit maxlength="200" v-model="ruleForm.description" type="textarea" />
				</el-form-item>
				<el-form-item label="位置示意图">
					<ImgList v-model="ruleForm.picsArr" />
				</el-form-item>
				<el-form-item prop="width" label="宽度">
					<el-input-number v-model="ruleForm.width"></el-input-number>
				</el-form-item>
				<el-form-item prop="height" label="高度">
					<el-input-number v-model="ruleForm.height"></el-input-number>
				</el-form-item>
				<el-form-item prop="score" label="排序">
					<el-input-number v-model="ruleForm.score"></el-input-number>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="submit">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup name="MarketingPosterList">
import { useInit, useEdit } from './hook';
import ImgList from '/@/components/common/imgList/ImgList.vue';
const resetForm = () => {
	searchForm.value.keyword = '';
};

const { searchForm, loading, tableData, init } = useInit();

const { isAdd, rules, ruleForm, addDialogVisible, formRef, title, toEdit, toAdd, submit } = useEdit(init);

// 页面加载时
onMounted(() => {});
</script>
<style lang="scss" scoped></style>
